<template>
	<view class="login_box">
		<view style="height: 15vh;"></view>
		<view class="comm_login">
			<view class="logout_button" @click="_logout()">X</view>
			<swiper
			class="scroll_box" 
			:current="index_num"
			@change="swiperchange"
			>
				<!-- @touchmove.stop 禁止鼠标滑动元素 -->
				<swiper-item @mousemove.stop.self.prevent @touchmove.stop id="login_1" class="login_mian_box">
					<view class="username_box">
						<view class="font_login">账 号</view>
						<view class="nickname_input">
							<input class="nickname" :focus="inputfocus.namefirst" @confirm="submit" type="nickname" v-model="inputvalue.nickname"/>
						</view>
					</view>
					<view class="password_box">
						<view  class="font_login">密  码</view>
						<view class="password_input">
							<!-- #ifdef H5 -->
							<input class="password" :focus="inputfocus.namesecond" @confirm="submit" type="safe-password" :password="showPassword" v-model="inputvalue.password"/>
							<view class="icon_box" @click="changePassword">
								<uni-icons class="icon" v-if="!showPassword" type="eye"color="#007AFF" size="24px"/>
								<uni-icons class="icon" v-else type="eye-slash" color="#999999" size="24px"></uni-icons>
							</view>
							</view>
							<!--#endif-->
							<!-- #ifndef H5 -->
							<input class="password" :focus="inputfocus.namesecond" @confirm="submit" :type="!showPassword ? safe-password : ''" type="" :password="showPassword" v-model="inputvalue.password"/>
							<view class="icon_box" @click="changePassword">
								<uni-icons class="icon" v-if="!showPassword" type="eye"color="#007AFF" size="24px"/>
								<uni-icons class="icon" v-else type="eye-slash" color="#999999" size="24px"></uni-icons>
							</view>
							</view>
							<!--#endif-->
					</view>
					<view class="submit_box">
						<view @click="submit(0)">登录</view>
					</view>
				</swiper-item>
				<swiper-item @mousemove.stop.self.prevent @touchmove.stop id="login_2" class="login_mian_box">
					<view class="username_box">
						<view class="font_login">邮 箱</view>
						<view class="nickname_input">
							<input class="mail" :focus="inputfocus.mailfirst" @confirm="submit" type="nickname"  v-model="inputvalue.mail"/>
						</view>
					</view>
					<view  class="password_box">
						<view  class="font_login">验证码</view>
						<view class="password_input">
							<input class="captcha" :focus="inputfocus.mailsecond" @confirm="submit" maxlength="6" type="text"  v-model="inputvalue.captcha"/>
							<view class="get_code" @click="get_code()">获取</view>
						</view>
					</view>
					<view class="submit_box" >
						<view @click="submit(0)">登录</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="login_option">
				<view v-for="(item,index) in loginText" 
				:class="index_num==(index-1)?'colorview':''" 
				:key="index" 
				:style="index == 0? 'color:red;font-size:16px;font-weight: 600;':''"
				@click="option(index)">{{item}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				showPassword:true,
				index_num:0,
				loginText:["注册","账号登录","邮箱登录","QQ登录","微信登录"],
				inputvalue:{
					nickname:"",
					password:"",
					mail:"",
					captcha:""
				},
				inputfocus:{
					namefirst: true,
					namesecond:false,
					mailfirst:false,
					mailsecond:false,
				},
				request: null,
				stopTouchMove:true,
			};
		},
		methods:{
			changePassword: function() {
			    this.showPassword = !this.showPassword;
			},
			stopTouchMove:function(){
				console.log("5555");
				return this.stopTouchMove;
			},
			submit(e){
				 uni.showLoading({
				                title: '登录中...'
				 });
				let num = this.index_num
				if(this._decide(num)){
					//账号登录
					if(num == 0){
						this.request = uni.request({
						    url: 'http://'+getApp().globalData.ip+'/user/login', //仅为示例，并非真实接口地址。
						    data: {
						        username: this.inputvalue.nickname,
								password: this.inputvalue.password
						    },
							header:{//form提交
								'content-type':'application/x-www-form-urlencoded; charset=UTF-8'//重点
							},
							method:"POST",
							
						    success: (res) => {
								uni.hideLoading()
								//全局存入用户数据
								getApp().globalData.userAllInfo=res.data.map;
								getApp().globalData.isLogin = true;
								this.$emit("userInfo",res.data.map.userInfo);
								this.$emit("isShowLoginPage",false);
								console.log("登陆成功")
						    },
							fail() {
								uni.showToast({
									title: '网路出现异常，请稍后再试',
									icon:'error',
									duration: 2000
								})
							}
						});

					//邮箱登录
					}else if(num==1){
						this.request = uni.request({
						    url: 'http://'+getApp().globalData.ip+'/mail/mailLogin', //仅为示例，并非真实接口地址。
						    data: {
						        mail: this.inputvalue.mail,
								code: this.inputvalue.captcha
						    },
							withCredentials: true,
							header:{//form提交
								'content-type':'application/x-www-form-urlencoded; charset=UTF-8',//重点
							},
							
							method:"POST",
							
						    success: (res) => {
								if(res.data.code == 444){
									uni.showToast({
										title: res.data.message,
										icon:'exception',
										duration: 2000
									})
								}
						        console.log(res);
						        
						    },
							fail() {
								uni.showToast({
									title: '网路出现异常，请稍后再试',
									icon:'exception',
									duration: 2000
								})
							}
						});
					}
				}
				
			},
			_decide(num){
				//账号登录
				if(num == 0){
					if(this.inputvalue.nickname == "" && this.inputvalue.password == ""){
						uni.showToast({
							title: '用户名和密码不能为空',
							icon:'error',
							duration: 2000
						})
						this.inputfocus.namefirst=true;
						this.inputfocus.namesecond=false;
						return false;
					}else if(this.inputvalue.nickname == "" ){
						uni.showToast({
							title: '用户名不能为空',
							icon:'error',
							duration: 2000
						})
						this.inputfocus.namefirst=true;
						this.inputfocus.namesecond=false;
						return false;
					}else if( this.inputvalue.password == ""){
						uni.showToast({
							title: '密码不能为空',
							icon:'error',
							duration: 2000
						})
						this.inputfocus.namefirst=false;
						this.inputfocus.namesecond=true;
						return false;
					}
					return true;
					console.log(this.inputvalue.nickname + this.inputvalue.password)
				//邮箱登录
				}else if(num==1){
					if(this.inputvalue.mail == "" && this.inputvalue.captcha == ""){
						uni.showToast({
							title: '邮箱和验证码不能为空',
							icon:'error',
							duration: 2000
						})
						this.inputfocus.mailfirst=true;
						this.inputfocus.mailsecond=false;
						return false;
					}else if(this.inputvalue.mail == "" ){
						uni.showToast({
							title: '邮箱不能为空',
							icon:'error',
							duration: 2000
						})
						this.inputfocus.mailfirst=true;
						this.inputfocus.mailsecond=false;
						return false;
					}else if( this.inputvalue.captcha == ""){
						uni.showToast({
							title: '验证码不能为空',
							icon:'error',
							duration: 2000
						})
						this.inputfocus.mailfirst=false;
						this.inputfocus.mailsecond=true;
						return false;
					}
					return true;
					console.log(this.inputvalue.mail + this.inputvalue.captcha)
				}
			},
			option(e){
				if(e==0){
					//中断请求任务
					if(this.request != null){
						this.request.abort();
					}
					this.$emit("isShowLoginPage",false);
				}else{
					this.index_num=e-1;
				}
				
			},
			swiperchange(e){
				this.index_num=e.detail.current
			},
			get_code(){
				if(this.inputvalue.mail == "" ){
					uni.showToast({
						title: '邮箱不能为空',
						icon:'error',
						duration: 2000
					})
					return false;
				}
				var elementset = document.getElementsByClassName("get_code")[0];
				elementset.style.backgroundColor="#006c16";
				elementset.style.cursor="default";
				
				this.request = uni.request({
				    url: 'http://'+getApp().globalData.ip+'/mail/getCode', //仅为示例，并非真实接口地址。
				    data: {
				        to: this.inputvalue.mail,
				    },
					withCredentials: true,
					header:{//form提交
						'content-type':'application/x-www-form-urlencoded; charset=UTF-8',//重点
						'Access-Control-Allow-Credentials': true,
						'Access-Control-Allow-Origin': 'http://localhost:8080',
					},
					method:"POST",
					
				    success: (res) => {
						elementset.style.backgroundColor="#00c327";
						elementset.style.cursor="pointer";
						//打印cookie
				        console.log("res.header['Set-Cookie']:"+res.header['Cookie']);
						console.log(document.cookie)
						if(res.data.code == 444){
							uni.showToast({
								title: res.data.message,
								icon:'exception',
								duration: 2000
							})
						}else{
							uni.showToast({
								title: '验证码发送成功，请注意查收',
								icon:'none',
								duration: 2000
							})
						}
				        
				    },
					fail() {
						uni.showToast({
							title: '网路出现异常，请稍后再试',
							icon:'exception',
							duration: 2000
						})
					}
				});
			},
			_logout(){
				//中断请求任务
				if(this.request != null){
					this.request.abort();
				}
				this.$emit("isShowLoginPage",false);
			}
		}
	}
</script>

<style>
	page{
		height: 100%;
		width: 100%;
	}
	/deep/::-webkit-scrollbar {
			 display: none;
			 width: 0;
			 height: 0;
			} 
	.password_box,.password_input,
	.username_box,.submit_box,
	.icon_box,.login_option{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.login_option>view,.submit_box>view{
		cursor: pointer;
	}
	.password_box,.username_box{
		height: 5vh;
		border-top: 40px solid #fdfdfd00;
		justify-content: space-evenly;
	}
	.nickname_input,.password_input{
		width: 75.58%;
		justify-content: space-between;
	}
	.colorview{
		color: #2bbae5;
	}
	.password,.nickname,.mail,.captcha{
		width: 100%;
		height: 5vh;
		background-color: #fff;
	}
	/*.login_mian_box,*/,.scroll_box,.login_option{
		background-color: #2a2a2a91;;
	}
	.comm_login{
		width: 86vw;
		max-width: 863px;
		margin: 0 auto;
		position: relative;
	}
	.login_mian_box{
		display: inline-block;
		width: 86vw;
	}
	.login_box{white-space: nowrap}
	.scroll_box,.comm_login{
		height: 35vh;
	}
	swiper-item{
		cursor: default;
	}
	.login_option{
		height: 15vh;
		justify-content: space-around;
		color: #fff;
	}
	
	.submit_box{
		flex-direction: column;
		align-items: center;
		border-top: 40px solid #fdfdfd00;
	}
	.submit_box>view{
		background-color: #03d300;
		width: 68rpx;
		height: 43rpx;
		line-height: 43rpx;
		text-align: center;
	}
	.font_login{
		font-weight: 600;
		color: #fff;
		font-size: 120%;
		word-spacing: 20rpx;
	}
	.logout_button{
		float: right;
		color: #fff;
		background-color: #e5e7ed4d;
		width: 5%;
		min-width: 33px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		cursor: pointer;
		
	}
	.get_code{
		background-color: #00c327;
		margin-left: 20rpx;
		height: 5vh;
		width: 80rpx;
		line-height: 5vh;
		text-align: center;
		cursor: pointer;
	}
</style>